<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>login</title>
		
		<script src="${ctxStatic}/IDH/js/rem.js" type="text/javascript" charset="utf-8"></script>
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/reset.min.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/toastr/toastr.min.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap=v3.3.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctxStatic}/bootstrapValidator/dist/css/bootstrapValidator.min.css"/>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/layer-v3.0.1/layer/skin/default/layer.css"/>
		
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/head/head.css">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/login.css" />		
	   <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
		
		<style>
			.input-text {
				line-height: 34px;
			}
			.btn-primary {
				background-color: #28aac5 !important;
				border-color: #28aac5 !important;
			}
			#qqLoginBtn {
				display: none;
			}
			.other-login {
				text-align: center;
			}
			.login-title {
				color: #7d7b7b;
				/* margin: 10px auto; */
			}
			.login-title hr {
				width: 25%;
			    display: inline-block;
			    margin: 0;
			    margin-bottom: 3px;
			    color: #7d7b7b;
			}
			.login-title img{
				cursor: pointer;
			}
			.register_content a {
				color: #28aac5 !important;
			}
			#validateCode{
			    font-weight: bold;
			    margin-bottom: 0;
			    display: inline-block;
			    width: 52%!important;
			    height: 34px;
			    padding: 6px 12px;
			    font-size: 14px;
			    line-height: 1.42857143;
			    color: #555;
			    background-color: #fff;
			    background-image: none;
			    border: 1px solid #ccc;
			    border-radius: 4px;
			    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
			    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			}
		</style>
	</head>

	<body>
		<%-- <%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%> --%>
		<!-- pc head start -->
	    <header class="pc_dom hidden-xs">
			<div class="header container" style="padding-left:0;padding-right:0;">
				<div class="col-xs-12">
					<div class="row row_center">
						<div class="col-xs-3 header_logo" style="margin-left:10px;">
							<a href="#">
								<img style="width:100%;height:100%;" src="${ctxStatic}/IDH/images/JS MALL LOGO-01-01.png" />
							</a>
						</div>
						<div class="col-xs-4 header_nav">
							<ul class="hn_ul">
								<li>
									<a href="${ctxf}">公司首页</a>
								</li>
								<li  class="tabLi">
									<a href="${ctxf}/front/index">商城首页</a>
								</li>
								<li>
									<a href="${ctxf}/front/product/genProduct/developmentBoard">开发板</a>
								</li>
								<li>
									<a href="${ctxf}/front/product/genProduct/parts">配件</a>
								</li>
								<li>
									<a href="https://www.gainseng.com/jsluntan" target="_blank" onclick="login()" style="cursor:pointer;">霁圣论坛</a>
								</li>
							</ul>
						</div>
						<div class="col-xs-5 header_help">
							<div class="help_top">
								<ul class="hp_ul">
									<li>
										<a href="${ctxf}/list-1588f167d2e3428a82e73d683b81b182.html">帮助</a>
									</li>
									<li>
										<c:if test="${count != null}">
											<ul class="pc-nav" id="pc-nav">
										        <li>
										        	<a href="#">${user.username } <span class="caret"></span></a>
										            <ul class="pc-subnav">
										                <li><a href="${ctxf}/userfront/myAccount.html" >我的账户</a></li>
										                <li><a href="${ctxf}/userfront/toOrder" >我的订单</a></li>
										                <li><a href="${ctxf}/userfront/toAddress2">收货管理</a></li>
										                <li><a href="${ctxf}/logout">退出</a></li>
										            </ul>
										        </li>
										    </ul>
	                               		</c:if>
										<c:if test="${count == null}">
											<a href="${ctxf}/account/login.html">登录</a>
										</c:if>
									</li>
								</ul>
							</div>
							<div class="row help_bottom">
								<div class="col-xs-12">
									<div class="shopCar " onclick="clickShopCar();">
										<div class="btn btn-default btnCar">
											<a href="#"><i class="iconfont icon-gouwuche"></i>购物车</a>
										</div>
										<c:if test="${count != null && count != 0}">
                                         <div class="carNumber" id="countDiv">${count }</div>
                               			</c:if>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!--pc head end-->
	
		<!--phone head start-->
		<header class="phone_dom visible-xs-block">
			<div class="p_head">
				<div class="p_logo">
					<a href="#">
						<img src="${ctxStatic}/IDH/images/JS MALL LOGO-01-01.png" />
					</a>
				</div>
				<div class="p_help">
					<ul class="p_hp_ul">
						<li>
							<a href="${ctxf}/list-1588f167d2e3428a82e73d683b81b182.html">帮助</a>
						</li>
						<li>
							<c:if test="${count != null}">
	                           <ul class="phone-nav" id="phone-nav">
							        <li>
							        	<a href="#">${user.username } <span class="caret"></span></a>
							            <ul class="phone-subnav">
							                <li><a href="${ctxf}/userfront/addAddress.html" >我的账户</a></li>
							                <li><a href="${ctxf}/userfront/toOrder" >我的订单</a></li>
							                <li><a href="${ctxf}/userfront/toAddress2">收货管理</a></li>
							                <li><a href="${ctxf}/logout">退出</a></li>
							            </ul>
							        </li>
							    </ul>
	                       </c:if>
	                           		
							<c:if test="${count == null}">
								<a href="${ctxf}/account/login.html">登录</a>
							</c:if>
						</li>
					</ul>
				</div>
			</div>
			<div class="p_nav">
				<ul class="p_ul">
					<li>
						<a href="${ctxf}">公司首页</a>
					</li>
					<li class="p_ul_li_active">
						<a href="${ctxf}/front/index">商城首页</a>
					</li>
					<li>
						<a href="${ctxf}/front/product/genProduct/developmentBoard">开发板</a>
					</li>
					<li>
						<a href="${ctxf}/front/product/genProduct/parts">配件</a>
					</li>
					<li>
						<a href="${ctxf}/front/product/genProduct/searchPro" id="phone-search"><i class="iconfont icon-sousuo"></i></a>
						<a href="#" onclick="clickShopCar();"><i class="iconfont icon-gouwuche"></i></a>
					</li>
				</ul>
			</div>
		</header>
		<!--phone head end-->
		
		<div class="content">
			<div class="container" style="min-height: 500px;">
				<div class="row">
					<div class="col-sm-4 col-sm-offset-4 form-box">
						<div class="form-top">
							<div class="form-top-img text-center">
								<h3>欢迎登陆</h3>
							</div>
						</div>
						<div class="register_content">
							<div class="col-sm-12">
								<form id="loginForm" method="post" class="form-horizontal" >
									<div class="form-group ">
										<div class="col-sm-12">
											<div class="input-group">
												<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
												<c:if test="${message!=null&&message!=''}"><sys:message content="${message}"/></c:if><input type="text" class="form-control" name="username" id="phoneUserName" placeholder="请输入用户名" onchange="changeInput('userName')"/>
											</div>
										</div>
									</div>
									<div class="form-group input-text">
										<div class="col-sm-12">
											<div class="input-group">
												<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
												<input type="password" class="form-control" name="passWord" id="phonePassword" placeholder="请输入密码" onchange="changeInput('passWord')" autocomplete="off"/>
											</div>
										</div>
									</div>
									<div class="form-group input-text">
										<div class="col-sm-12">
											<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
										</div>
									</div>
									<div class="form-group text-right forget_password">
										<a href="${ctxf}/account/register.html">注册 </a>  | <a href="${ctxf}/account/forgetPassword">忘记密码</a>
										 <span id="qqLoginBtn"></span>
										<script type="text/javascript">
										    QC.Login({
										       btnId:"qqLoginBtn"   //插入按钮的节点id
												});
										 </script>
									</div>
									<div class="form-group option">
										<button type="submit"  class="btn btn-primary btn-lg btn-block login" onclick="loginFunction();">登录</button>
									</div>
									<div class="form-group other-login">
										<div class="col-md-10 login-title col-md-offset-1">
											<div class="Third_party_login">
												<div class="line"></div> 
												<div class="text">第三方登录</div> 
												<div class="line"></div>
											</div>
											<div class="third-party-login-logo hidden-xs clearfix">
												<a class="pull-left" href="${ctxf}/weixinForLogin">
													<img class="pull-left" title="微信登录" src="${ctxStatic}/IDH/images/weixin.png">	
												</a>
												<a class="pull-right" href="${ctxf}/forQQLogin">
												   <img class="pull-right" title="QQ登录" src="${ctxStatic}/IDH/images/QQ.png" onclick="$('#qqLoginBtn a').click()">	
												</a>
											</div>
											<div class="third-party-login-logo visible-xs-block clearfix">
												<a class="" href="${ctxf}/forQQLogin"> 
												   <img title="QQ登录" src="${ctxStatic}/IDH/images/QQ.png" onclick="$('#qqLoginBtn a').click()">	
												</a>									
											</div>
										</div>
									</div>
								</form>
							</div>
							<div style="clear: both"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--footer start-->
		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

		<!--footer end-->
	</body>
	
	<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/bootstrap=v3.3.0/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/bootstrapValidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/layer-v3.0.1/layer/layer.js"></script>
	
	<script type="text/javascript">
	 	var userName = true;
	 	var passWord = true;
	 	var shopCarClick = false;//默认登陆后调到上次首页；
	 	var jsluntan;
		$(document).ready(function(){
			
			var value = sessionStorage.getItem('key');
			jsluntan = sessionStorage.getItem('jsluntan');
			var data = JSON.parse(value);
			if(data != null){
				$('.hn_ul li').eq(data.index).addClass('tabLi').siblings().removeClass('tabLi');
				$('.p_ul li').eq(data.index).addClass('p_ul_li_active').siblings().removeClass('p_ul_li_active');
			}
			
			//登录按钮回车事件
			$(document).keydown(function(event){
		    	var e = event || window.event || arguments.callee.caller.arguments[0];
		    	if (e && e.keyCode == 13) { // enter 键
		    		e.preventDefault();
		    		loginFunction();
		    	}	
		    });
		    
		    $('#loginForm').bootstrapValidator({  
				 message: 'This value is not valid',
			        feedbackIcons: {
			            valid: '',
			            invalid: '',
			            validating: ''
			        },
			        fields: {
				        'username': {
			                validators: {
			                    notEmpty: {
			                        message: '请输入用户名'
			                    },
			                    callback: {
									message: '用户名不存在',
									callback: function(value, validator) {
									return userName;
									}
								}
			                }
			            },
			            'passWord': {
			                validators: {
			                	notEmpty: {
			                        message: '请输入密码'
			                    },
			                   callback: {
									message: '密码错误请重试',
									callback: function(value, validator) {
									return passWord;
									}
								}
			                }
			            },
			        }
			}).on('success.form.bv', function (e) {
				e.preventDefault();
    		})
		});
	 	
		function login(){
			sessionStorage.setItem('jsluntan',true);
		}
		
		function loginFunction(){
			$.ajax({
				type:"POST",
				url:"${ctxf}/account/doLogin",
				data:$('#loginForm').serialize(),
				async:false,
				success:function(data){
					if(data.loginResult == "200"){
						var username = data.loginUserName;
						toastr.success('登录成功！',{timeOut: 1000});
						if(shopCarClick){
							setTimeout(function(){
								window.location.href = "${ctxf}/front/cart/genCart";
								if(jsluntan == "true"){
									window.open("https://www.gainseng.com/jsluntan/otherLogin/"+username, "_blank");
								}
							},1000);
						}else{
							setTimeout(function(){
								window.location.href = "${ctxf}/front/index";
								if(jsluntan == "true"){
									window.open("https://www.gainseng.com/jsluntan/otherLogin/"+username, "_blank");
								}
							},1000);
						}
					}else if(data.loginResult == "201"){
						userName = false;
						$('#loginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
					}else if(data.loginResult == "202"){
						passWord = false;
						$('#loginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
					}else if(data.loginResult == "204"){
						toastr.error("此账户已被禁用",{timeOut: 1000});
						/* passWord = false;
						$('#loginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord'); */
					}else if(data.loginResult == "206"){
						alert("验证码为空");
						
					}else if(data.loginResult == "207"){
						//刷新当前页面
						alert("输入验证码有误！");
					}
				}
			});
		}
		function changeInput(name){
			if(name == "userName"){
				userName = true;
				$('#loginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
			}else {
				passWord = true;
				$('#loginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
			}
		}
		
		//pc
		$('.hn_ul li').click(function() {
			$(this).addClass('tabLi').siblings().removeClass('tabLi');
			var data = new Object;
			data.index = $(this).index();
			var str = JSON.stringify(data);
			if($('.hn_ul li').is('.tabLi')) {
				sessionStorage.setItem('key', str);
			}
			
		});
		
		//phone
		$('.p_ul li').click(function() {
			$(this).addClass('p_ul_li_active').siblings().removeClass('p_ul_li_active');
			var data = new Object;
			data.index = $(this).index();
			var str = JSON.stringify(data);
			if($('.p_ul li').is('.p_ul_li_active')) {
				sessionStorage.setItem('key', str);
			}
		});
		
		function clickShopCar(){
	 		shopCarClick = true;
	 		toastr.error('请登录账号',{timeOut:1000});
	 	}
		
		 function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            //document.writeln("您的浏览设备为：");
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                //document.writeln("phone");
            	//解决输入被遮挡问题
        		window.onresize = function() {
        		    var top = $("#footer").offset().top;
        		    var user_message_box = $('#footer');
        		    top > 200 ? user_message_box.hide() : user_message_box.show();
        		};
        		$("#phoneUserName").focus(function(){
        			$(".container").css({"min-height":"600px"});
        			var top = $(".form-top-img").offset().top;
        			$("body,html").animate({
        					scrollTop: top + 20
        				}, 100, function() {
        					
        				});
        		});
        		$("#phoneUserName").blur(function(){
        			$(".container").css({"min-height":"500px"});
        		});
            } else {
                //document.writeln("pc");
            }
        }

        browserRedirect();
	 	
	</script>

</html>